<!-- 财务类 -->
<template>
<div class=''>
    <el-row :gutter="32">
          <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <el-card>
          <pie-chart :pieData="pieOptions"/>
          </el-card>
        </div>
      </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <el-card>
          <pie-chart :pieData="pieOptions"/>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <el-card>
          <pie-chart :pieData="pieOptions"/>
          </el-card>
        </div>
      </el-col>
    </el-row>
      <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
           <el-select v-model="value" size="mini" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
            </el-select>
             <el-radio-group v-model="radio" size="mini">
            <el-radio-button v-for="(item,index) in radios" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
           <el-date-picker
            v-model="time"
            type="daterange"
            align="right"
            unlink-panels
            style="float:right"
            size="mini"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
          <bar-chart />
        </div>
      </el-col>
    </el-row>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import PieChart from "../components/PieChart";
import BarChart from "../components/BarChart";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { PieChart, BarChart },
  data() {
    //这里存放数据
    return {
      options: [
        {
          value: "0",
          label: "一年同列"
        },
        {
          value: "1",
          label: "三年同列"
        }
      ],
      radios: ["一月", "三月", "半年", "一年", "所有"],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value: "",
      radio: "",
      time: "",
      pieOptions: {}
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initPieData() {
      this.pieOptions = {
        color: ["#d3758f", "#f3d999", "#a4d8c2", "#a4d8c2"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          left: "center",
          bottom: "10",
          data: ["未出租房屋数量", "房屋出租数量"]
        },
        calculable: true,
        title: {
          text: "房屋出租数量统计",
          backgroundColor: "#849fe2",
          textStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        series: [
          {
            name: "房屋面积统计",
            type: "pie",
            roseType: "radius",
            radius: [15, 95],
            center: ["50%", "38%"],
            data: [
              { value: 320, name: "未出租房屋数量" },
              { value: 0, name: "房屋出租数量" }
            ],
            animationEasing: "cubicInOut",
            animationDuration: 2600
          }
        ]
      };
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.initPieData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>